<template>

<div class="animationBoard">
    <div class="loadingIcon">
        
    </div>
    <span style="color: rgb(0, 0, 0,0.7);font-weight: 700;">思考中...</span>
</div>

</template>

<script lang="ts" setup>

</script>

<style>
@keyframes iconTurn{
            0%{
                transform: rotate(45deg);
            }

            20%{
                transform: rotate(45deg);
            }

            25%{
                transform: rotate(135deg);
            }


            45%{
                transform: rotate(135deg);
            }

            50%{
                transform: rotate(225deg);
            }

            70%{
                transform: rotate(225deg);
            }

            75%{
                transform: rotate(315deg);
            }

            95%{
                transform: rotate(315deg);
            }

            100%{
                transform: rotate(405deg);
            }
        }
</style>

<style scoped>

.animationBoard{
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.loadingIcon{
    width: 5px;
    height: 5px;
    background-color: rgb(0, 0, 0,0);
    margin: 20px;
    padding: 0px;
    box-sizing: border-box;
    border: 4px solid rgba(255, 255, 255, 0.8);
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 16px rgb(77, 228, 255);
    animation: iconTurn 4s ease infinite;
    font-size: 80%;
}



</style>